<template>
  <view class="notice-container">
    <view class="notice-header">
      <text class="title">大会通知</text>
      <text class="subtitle">CONFERENCE NOTICE</text>
    </view>
    
    <!-- 轮播广告 -->
    <view class="banner-wrapper">
      <ad-banner></ad-banner>
    </view>
    
    <view class="notice-content">
      <view class="notice-item">
        <text class="notice-title">关于2024护理管理学科发展研讨会的通知</text>
        <text class="notice-time">2024-01-15</text>
        <text class="notice-desc">为促进护理管理学科的发展，提升护理管理水平，定于2024年11月在合肥召开学术研讨会...</text>
      </view>
      <view class="notice-item">
        <text class="notice-title">会议地点变更通知</text>
        <text class="notice-time">2024-03-18</text>
        <text class="notice-desc">因场地调整，原定于中山大厦的会议改为在合肥国际大酒店举办，请各位参会人员注意。</text>
      </view>
      <view class="notice-item">
        <text class="notice-title">征文截止时间延长通知</text>
        <text class="notice-time">2024-05-20</text>
        <text class="notice-desc">应广大学者要求，本次会议征文截止日期延长至2024年7月31日，请有意向投稿的学者抓紧时间。</text>
      </view>
      
      <view class="decoration-circle circle-1"></view>
      <view class="decoration-circle circle-2"></view>
      <view class="decoration-circle circle-3"></view>
    </view>
  </view>
</template>

<script setup lang="ts">
import AdBanner from '@/components/AdBanner.vue';
</script>

<style lang="scss">
.notice-container {
  min-height: 100vh;
  background-color: #e6f1fc;
  position: relative;
  overflow: hidden;
  
  .notice-header {
    background: linear-gradient(135deg, #1e88e5, #1565c0);
    padding: 40rpx 32rpx;
    
    .title {
      color: #ffffff;
      font-size: 36rpx;
      font-weight: 500;
      display: block;
      margin-bottom: 8rpx;
    }
    
    .subtitle {
      color: rgba(255, 255, 255, 0.8);
      font-size: 20rpx;
      display: block;
      letter-spacing: 2rpx;
    }
  }
  
  .banner-wrapper {
    padding: 16rpx 24rpx;
    margin-bottom: 10rpx;
  }
  
  .notice-content {
    padding: 24rpx;
    position: relative;
    
    .notice-item {
      background: #ffffff;
      border-radius: 12rpx;
      padding: 24rpx;
      margin-bottom: 24rpx;
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
      position: relative;
      z-index: 2;
      
      .notice-title {
        font-size: 32rpx;
        color: #333;
        font-weight: 600;
        display: block;
        margin-bottom: 16rpx;
      }
      
      .notice-time {
        font-size: 24rpx;
        color: #00866a;
        display: block;
        margin-bottom: 16rpx;
      }
      
      .notice-desc {
        font-size: 28rpx;
        color: #666;
        line-height: 1.6;
      }
    }
    
    .decoration-circle {
      position: absolute;
      border-radius: 50%;
      z-index: 1;
      
      &.circle-1 {
        width: 300rpx;
        height: 300rpx;
        background: rgba(0, 134, 106, 0.05);
        top: -120rpx;
        right: -100rpx;
      }
      
      &.circle-2 {
        width: 200rpx;
        height: 200rpx;
        background: rgba(30, 136, 229, 0.05);
        bottom: 80rpx;
        left: -80rpx;
      }
      
      &.circle-3 {
        width: 160rpx;
        height: 160rpx;
        background: rgba(0, 134, 106, 0.08);
        bottom: 200rpx;
        right: -60rpx;
      }
    }
  }
}
</style> 